<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 权限控制</el-breadcrumb-item>
                <el-breadcrumb-item>配置权限</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- <codemirror v-model="code" :options="editorOptions"></codemirror>
        <br/> -->
        <el-button type="primary" @click="onSubmit">保存配置</el-button>
    </div>
</template>

<script>
    import NProgress from 'nprogress'
    import api from '../../api/api'
    import  util  from '../../common/util'
    // import { codemirror } from 'vue-codemirror'

    export default {
        data() {
            return {
                code: '',
                editorOptions: {
                    height:"700px",
                    tabSize: 4,
                    mode: 'text/xml',
                    theme: 'base16-dark',
                    lineNumbers: true,
                    line: true,
                    // sublime、emacs、vim三种键位模式，支持你的不同操作习惯
//                    keyMap: "sublime",
//                    // 按键映射，比如Ctrl键映射autocomplete，autocomplete是hint代码提示事件
                    extraKeys: { "Ctrl": "autocomplete" },
                    // 代码折叠
                    foldGutter: true,
                    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                    // 选中文本自动高亮，及高亮方式
                    styleSelectedText: true,
                    highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
                    // more codemirror config...
                    // 如果有hint方面的配置，也应该出现在这里
                }
            }
        },
        components: {
            // codemirror
        },
        methods: {
            onSubmit() {
                var that = this;
                var options = {
                    content:that.code
                }
                api.saveRightConfig(options).then((res) => {
                    if(res.ret==0){
                        that.$message({
                            type: 'success',
                            message: '保存配置文件成功！'
                        });
                    }
                }).catch(e => {
                    that.$message({
                        type: 'error',
                        message: '保存配置文件失败！'
                    });
                });
            },
            getRightConfig(){
                var that = this;
                api.getRightConfig({}).then((res) => {
                    if(res.ret==0){
                        that.code = res.content;
                    }
                }).catch(e => {
                    that.$message({
                        type: 'error',
                        message: '获取配置文件失败！'
                    });
                });
            }
        },
        computed: {
            editor() {
                return this.$refs.myEditor.editor
            }
        },
        mounted() {
            this.getRightConfig();
//            console.log('this is current editor object', this.editor)
        }
    }
</script>
<style>
    .CodeMirror{
        height: 700px!important;
    }
</style>
